<template>
    <div class="wrapper">
        <div class="left" v-if="isLogoShow">
            <image :src="logoUrl" class="logo" v-if="isShow"></image>
        </div>
        <div class="right">
            <text class="name">白羽潇潇</text>
            <text class="text" lines="2">Weex 是一套简单易用的跨平台开发方案，能以 Web 的开发体验构建高性能、可扩展的原生应用。Vue 是一个轻量并且功能强大的渐进式前端框架。</text>
        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        props: {
            isLogoShow: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
            }
        },
        methods: {},
        created() {

        }
    }
</script>

<style scoped>
    .wrapper {
        flex-direction: row;
        justify-content: space-between;
        background-color: orange;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    .left {
        background-color: darkblue;
        width: 150px;
        height: 150px;
        

        border-width: 10px;
        border-style: solid;
        border-color: white;
        border-radius: 75px;
    }
    .right {
        flex: 1;
        padding: 20px;

        
    }
    .name {
        lines: 1;
    }
    .text {
        lines: 2;

        /* 文字溢出显示...  */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
